<template>
  <a-card title="设置" :headStyle="cardTitleStyle" :bodyStyle="{paddingBottom: 0}" :bordered="false">
    <a-form-model ref="form" :model="data" :rules="rules">
      <a-row>
        <a-col :span="10">
          <div class="nmv-mx-320">
            <a-form-model-item label="登录账号" :colon="false">
              <a-input v-model="params.username" placeholder="请输入登录账号" disabled />
            </a-form-model-item>
            <a-form-model-item label="角色类型" :colon="false">
              <a-input v-model="params.roleNames[0]" placeholder="请输入角色类型" disabled />
            </a-form-model-item>

            <a-form-model-item label="原密码" prop="oldPassword" :colon="false">
              <a-input v-model="data.oldPassword" type="password" placeholder="请输入原登录密码" />
            </a-form-model-item>
            <a-form-model-item label="新密码" prop="password" :colon="false">
              <a-input
                v-model="data.password"
                type="password"
                placeholder="密码6-15位，字母/数字/符号2种及以上组合"
                :maxLength="16"
              />
            </a-form-model-item>
            <a-form-model-item label="确认新密码" prop="repassword" :colon="false">
              <a-input
                v-model="data.repassword"
                type="password"
                placeholder="请再次输入新密码"
                :maxLength="16"
              />
            </a-form-model-item>
            <a-form-model-item style="margin-top:20px;">
              <a-button type="primary" @click="handleSave" :loading="load">保存</a-button>
            </a-form-model-item>
          </div>
        </a-col>
        <a-col :span="14">
          <div class="avatar-container">
            <div class="avatar-title">头像</div>
            <a-avatar :size="140" :src="file" class="avatar-icon" />
            <!-- <a-button class="avatar-upload" @click="changeAvatar"> <a-icon type="upload"/> 修改头像 </a-button> -->
            <a-upload class="avatar-upload" :file-list="fileList" :before-upload="changeAvatar">
              <a-button>
                <a-icon type="upload" />修改头像
              </a-button>
            </a-upload>
          </div>
        </a-col>
      </a-row>
    </a-form-model>
    <setting-avatar ref="setAvatar" @ok="setAvatar" />
  </a-card>
</template>

<script>
import { cardTitleStyle } from '@/utils/style.js'
import { mapGetters, mapMutations } from 'vuex'
import SettingAvatar from './SettingAvatar'
import { userInfoByToken, updateSetting } from '@/services/sys'
import { passwordsNewRules } from '@/utils/validate.js'

export default {
  components: { SettingAvatar },
  methods: {
    ...mapMutations('account', ['setUser']),
    changeAvatar (file) {
      this.$refs.setAvatar.open(file)
      return false
    },
    setAvatar (url) {
      this.file = url
      this.user.avatar = this.file
      this.setUser(this.user)
    },
    handleSave () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.axiosSumbit()
        }
      })
    },
    async getList () {
      const res = await userInfoByToken()
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.params = response
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async axiosSumbit () {
      const res = await updateSetting(this.data)
      const { isSuccess, msg } = res
      if (isSuccess) {
        this.$message.newFun('密码更新成功,请重新登录', 'success', 2)
        this.$router.push('/login')
      } else {
        this.$message.newFun(msg, 'error', 3)
      }
      this.load = false
    }
  },
  computed: {
    ...mapGetters('account', ['user', 'roles'])
  },
  mounted () {
    this.getList()
    this.file = this.user.avatar
  },
  data () {
    return {
      fileList: [],
      file: null,
      data: {},
      load: false,
      params: {
        roleNames: []
      },
      rules: Object.freeze({
        code: [{ required: true }],
        name: [{ required: true }],
        type: [{ required: true }],

        oldPassword: [
          { required: true, message: '请输入原登录密码', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          {
            validator: passwordsNewRules
          }
        ],
        repassword: [
          { required: true, message: '请再次确认密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (this.data.password || value) {
                if (this.data.password !== value) {
                  callback(new Error('请保持两次密码一致'))
                  return
                }
              }
              callback()
            },
            message: '请保持两次密码一致',
            trigger: 'blur'
          }
        ]
      }),
      cardTitleStyle
    }
  }
}
</script>

<style lang="less" >
.avatar-container {
  margin-top: 10px;
  @media screen and (max-width: 576px) {
    margin-top: 0px;
  }
  .nmv-mx-320 {
    .ant-form-item-label {
      line-height: 20px !important;
    }
  }

  .avatar-title {
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 9px;
  }

  .avatar-icon {
    margin-bottom: 12px;
    display: block;
    border: 1px solid #d9d9d9;
  }

  .avatar-upload {
    margin-left: 15px;
  }
}
</style>
